<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>拓展菜单</title>
	<style>
		.expando {
			border: 1px solid #7F7F7F;
			padding: 3em;
			margin: auto;
			max-width: 400px;
		}

		.expando li {
			line-height: 2em;
			border-bottom: 1px dashed #604646;
		}

		.eapando-title {
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			font-size: 2em;
			text-align: center;
		}

		.js .expando-list {
			overflow: hidden;
			transition: all .25s ease-in-out;
			max-height: 0;
			opacity: 0;
		}

		.js .is-expanded .expando-list {
			max-height: 24em;
			opacity: 1;
		}
	</style>
</head>

<body>
	<div class="expando">
		<h2 class="eapando-title">Top menu choises</h2>
		<ol>
			<li>Champagne</li>
			<li>Brandy</li>
			<li>Wine</li>
		</ol>
		<ol class="expando-list" start="4" aria-label="Top menu choises,continued.">
			<li>Benedictine</li>
			<li>Cocktail</li>
			<li>Whiskey</li>
			<li>Sherry</li>
			<li>rum</li>
			<li>vodka</li>
			<li>Gin</li>
		</ol>
	</div>
</body>

</html>